<template>
  <div class="header">
    <div @click="handleJump('prev')" v-if="$route.path!=='/home'&&$route.path!=='/login'" class="hide-router-btn prev"></div>
    <div @click="$router.push('/home')" class="title">{{title}}</div>
    <div @click="handleJump('next')" v-if="$route.path!=='/home'&&$route.path!=='/login'" class="hide-router-btn next"></div>
  </div>
</template>
<script>

import getPageTitle from "@/utils/get-page-title";

export default {
  name: 'Header',
  methods: {
    getPageTitle,
    handleJump(type){
      const router=[
        '/home',
        '/forwardPost',
        '/hinge',
        '/circle',
        '/bridge',
      ]
      const index=router.indexOf(this.$route.path);
      if(type==='prev'){
        if(index>0){
          this.$router.push(router[index-1])
        }
      }else if(type==='next'){
        if(index<router.length-1){
          this.$router.push(router[index+1])
        }
      }
    }
  },
  computed:{
    title(){
      const router={
        '/home':getPageTitle(),
        '/forwardPost':'预警预防前沿哨',
        '/hinge':'协同共治枢纽站',
        '/circle':'立体防控快反圈',
        '/bridge':'便民服务连心桥',
      }
      return router[this.$route.path]||getPageTitle()
    }
  },

}
</script>
<style scoped lang="scss">
.header{
  width: 100%;
  height: 220px;
  position: fixed;
  background: url("~@/assets/images/header-background.png") no-repeat center top;
  background-size: 100% 100%;
  z-index: 10;
  display: flex;
  justify-content: center;
  padding-top: 15px;
  .title{
    color: #fff;
    font-family: 冷酷体;
    font-size: 36px;
    cursor: pointer;
  }
  .hide-router-btn{
    width: 300px;
    height: 60px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    z-index: 100;
    &.prev{
      left: 10px;
    }
    &.next{
      right: 10px;
    }
  }
}
</style>
